<template>
	<view>
		<view class="search">
			<view class="search-header">
				<view class="icon">
					<text class="iconfont icon-sousuo"></text>
					<input type="text" placeholder="uniapp如何做小程序"></input>
				</view>
				<button type="default" size="mini">搜索</button>
			</view>
			
			<view class="hot">
				<view class="title">热门搜索</view>
				<view class="hot-search">
					<view class="hot-item" v-for="item in hotSearch" :key="item.id">
						<view class="num">{{item.id}}</view>
						<view class="hot-event">{{item.content}}</view>
						<view class="new" v-if="item.isNew">新</view>
					</view>
				</view>
			</view>
			
			<view class="records">
				<view class="title">搜索记录</view>
				<view class="his">
					<view class="records-item" v-for="item in hisRecords" :key="item.id">
						<view class="info">{{item.content}}</view>
					</view>
					
				</view>
			</view>
			
			<view class="clear-his" @click="clearHis">
				<text class="iconfont icon-lajitong"></text>
				清空搜索记录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSearch: [
					{
						"id": 1,
						"content": "茂名电白区疫情防控",
						"isNew": false
					},
					{
						"id": 2,
						"content": "985毕业生迷恋收破烂小伙",
						"isNew": true
					},
					{
						"id": 3,
						"content": "巫师3游戏解说",
						"isNew": true
					},
					{
						"id": 4,
						"content": "孤岛惊魂6",
						"isNew": true
					},
					{
						"id": 5,
						"content": "无框车门真的有必要吗",
						"isNew": false
					},
					{
						"id": 6,
						"content": "三维码是什么",
						"isNew": false
					},
					{
						"id": 7,
						"content": "跟素颜和解",
						"isNew": false
					},
					{
						"id": 8,
						"content": "爆改1000匹的GTR",
						"isNew": true
					},
					{
						"id": 9,
						"content": "一场真男人的较量",
						"isNew": true
					},
					{
						"id": 10,
						"content": "雅马哈r1跑得过柯尼塞格吗",
						"isNew": false
					}
				],
				
				hisRecords: [
					{
						"id": 1,
						"content": "nodejs",
					},
					{
						"id": 2,
						"content": "小程序视频",
					},
					{
						"id": 3,
						"content": "巫师3游戏解说",
					},
					{
						"id": 4,
						"content": "孤岛惊魂6",
					},
					{
						"id": 5,
						"content": "thinkphp6",
					},
					{
						"id": 6,
						"content": "刺客信条：奥德赛",
					}
				]
			}
		},
		methods: {
			clearHis() {
				let _this = this;
				uni.showModal({
					content: '确定清空所有搜索记录吗？',
					success: function (res) {
						if (res.confirm) {
							_this.hisRecords = []
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			}
		}
	}
</script>

<style scoped lang="scss">

	.search {
		padding: 30rpx 20rpx 0;
		box-sizing: border-box;
		.search-header {
			display: flex;
			.icon {
				display: flex;
				width: 80%;
				height: 60rpx;
				background-color: #edebee;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				
				text {
					line-height: 60rpx;
					margin-right: 20rpx;
					font-size: 32rpx;
					color: #999;
				}
				input {
					flex: 1;
					height: 60rpx;
					background-color: #edebee;
					font-size: 28rpx;
				}
			}
			button {
				line-height: 60rpx;
				font-size: 26rpx;
			}
		}
		
		.hot {
			.title {
				font-weight: 800;
				font-size: 30rpx;
				color: #333;
				margin-top: 40rpx;
			}
			.hot-search {
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin-top: 30rpx;
				flex-wrap: wrap;
				font-size: 26rpx;
				font-family: "Microsoft YaHei";
				.hot-item {
					display: flex;
					align-items: center;
					width: 46%;
					margin-bottom: 24rpx;
					.num {
						margin-right: 16rpx;
						color: #999;
					}
					.hot-event {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.new {
						width: 30rpx;
						height: 30rpx;
						text-align: center;
						line-height: 30rpx;
						background-color: #ff6d9f;
						margin-left: 16rpx;
						color: #fff;
						font-size: 20rpx;
						border-radius: 3px;
					}
				}
			}
		}
		
		.records {
			.title {
				font-weight: 800;
				font-size: 30rpx;
				color: #333;
				margin-top: 40rpx;
			}
			
			.his {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				.records-item {
					background-color: #fff;
					padding-right: 20rpx;
					margin-bottom: 20rpx;
					.info {
						padding: 8rpx 20rpx;
						color: #666;
						background-color: #edebee;
						border-radius: 5px;
						font-size: 26rpx;
					}
				}
			}
		}
		
		.clear-his {
			text-align: center;
			padding-top: 40rpx;
			font-size: 30rpx;
			color: #999;
			text {
				font-size: 32rpx;
				margin-right: 8rpx;
			}
		}
	}

</style>
